<template>
  <div :class="isInline ? 'section_dropn inlinedropn' : 'section_dropn'">
    <template v-if="!isInline">
      <span :class="isDrop ? 'text_21' : 'text_21 reddrop'"
        >同比{{ isDrop ? "降幅" : "增长" }}：</span
      >
      <!-- <img
        class="thumbnail_1"
        referrerpolicy="no-referrer"
        src="../../../assets/imgs/SketchPngfeaefaddb12411d6a887b24ab7d6f97e36a67084719a218ccb97eca160f7bbb8.png"
      /> -->
      <span class="thumbnail_1">
        <svg
          t="1755144971805"
          :class="isDrop ? 'thumbnail_3' : 'thumbnail_2'"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1983"
        >
          <path
            d="M237.09359375 557.82265625L512 1016 786.90640625 557.82265625l-183.2709375 0L603.63546875 8.00000001l-183.2709375 0L420.36453125 557.82265625l-183.2709375 0z"
            p-id="1984"
          ></path>
        </svg>
      </span>

      <span :class="isDrop ? 'text_22' : 'text_22 reddrop'">
        <BigNumber :value="value" />
        %
      </span>
    </template>
    <template v-else>
      <span :class="isDrop ? 'text_126_drop' : 'text_126_drop reddrop'"
        >同比{{ isDrop ? "降幅" : "增长" }}：</span
      >
      <!-- <img
        class="thumbnail_17_drop"
        referrerpolicy="no-referrer"
        src="../../../assets/imgs/SketchPngff20dcf7b5f4240f0b592a61181780e3efa34dbc056829dee38327f5a364b6d6.png"
      /> -->
      <span class="thumbnail_17_drop">
        <svg
          t="1755144971805"
          :class="isDrop ? 'thumbnail_3' : 'thumbnail_2'"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1983"
        >
          <path
            d="M237.09359375 557.82265625L512 1016 786.90640625 557.82265625l-183.2709375 0L603.63546875 8.00000001l-183.2709375 0L420.36453125 557.82265625l-183.2709375 0z"
            p-id="1984"
          ></path>
        </svg>
      </span>
      <span :class="isDrop ? 'text_127_drop' : 'text_127_drop reddrop'"
        ><BigNumber :value="value" />%</span
      >
    </template>
  </div>
</template>

<script>
import countTo from "vue-count-to";
import BigNumber from "./BigNumber.vue";
export default {
  props: {
    value: {
      type: Number | String,
      default: 0,
    },
    isInline: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    countTo,
    BigNumber,
  },
  data() {
    return {
      //   startVal: 0,
      //   endVal: 0,
      //   duration: 2000,
      //   decimals: 0,
      isDrop: false, // 降幅/增幅
    };
  },
  watch: {
    value: {
      handler(newVal) {
        if (newVal === '-') {
          this.isDrop = false;
          return 
        }
        if (Number(newVal) > 0 || Number(newVal) === 0) {
          this.isDrop = false;
        } else {
          this.isDrop = true;
        }
      },
      deep: true,
    },
  },
  created() {
    this.endVal = Number(this.value);
  },
  methods: {
    getDecimalPlaces(num) {
      const str = num.toString();
      if (str.indexOf(".") === -1) return 0; // 无小数点
      return str.split(".")[1].length; // 返回小数位数
    },
  },
};
</script>

<style lang="scss" scope>
.section_dropn {
  width: fit-content;
  height: 13px;
  margin-top: 4px;
  display: inline-block;
  flex-direction: row;
  .text_21 {
    width: 46px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(60, 240, 128, 1);
    font-size: 9px;
    letter-spacing: 0.16875000298023224px;
    font-family: PingFangSC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
  }

  .thumbnail_1 {
    display: inline-block;
    width: 6px;
    height: 10px;
    margin: 0px 0 0 -2px;
    // position: relative;
    // top: 2px;
    // color: rgba(60, 240, 128, 1);
    // overflow: hidden;
  }
  .thumbnail_2 {
    width: 6px;
    height: 10px;
    transform: scale(1.8);
    position: relative;
    top: 1px;
    rotate: 180deg;
    fill: red;
  }
  .thumbnail_3 {
    width: 6px;
    height: 10px;
    transform: scale(1.8);
    position: relative;
    top: 1px;
    fill: rgba(60, 240, 128, 1);
  }

  .text_22 {
    width: 21px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(60, 240, 128, 1);
    font-size: 9px;
    letter-spacing: 0.16875000298023224px;
    font-family: PingFangSC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
    margin-left: 4px;
  }
  .reddrop {
    // color: red;
  }
}
.inlinedropn {
  margin-top: 0;
}

.text_126_drop {
  width: 46px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(60, 240, 128, 1);
  font-size: 9px;
  letter-spacing: 0.16875000298023224px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
  margin: 8px 0 0 4px;
}

.thumbnail_17_drop {
  display: inline-block;
  width: 6px;
  height: 10px;
  margin: 0px 0 0 -4px;
  //   position: relative;
  //   top: 2px;
  //   overflow: hidden;
}
.thumbnail_2 {
  width: 6px;
  height: 10px;
  transform: scale(1.8);
  position: relative;
  top: 1px;
  rotate: 180deg;
  fill: red;
}
.thumbnail_3 {
  width: 6px;
  height: 10px;
  transform: scale(1.8);
  position: relative;
  top: 1px;
  fill: rgba(60, 240, 128, 1);
}

.text_127_drop {
  width: 19px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(60, 240, 128, 1);
  font-size: 9px;
  letter-spacing: 0.16875000298023224px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
  margin: 8px 0 0 2px;
}

.reddrop {
  // color: red;
}

.child {
  display: inline-block;
  width: fit-content;
  font-weight: inherit; /* 强制继承父元素的 600 */
}
</style>
